<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>培训</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/wwl/icon/iconfont.css" />
    <link rel="stylesheet" href="../css/lxr/training-index.css" />
  </head>
  <body>
    <nav class="nav-ct">
      <div class="nav-hd">
        <span class="iconfont icon-oabangong"></span>
        <span class="title">办公后台系统</span>
      </div>
      <div class="center">
        <ul class="nav-content">
          <li><a href="../code/index.html">工作台</a></li>
          <li><a href="">数据大屏</a></li>
          <li><a href="">员工</a></li>
          <li><a href="">组织</a></li>
          <li><a href="">招聘</a></li>
          <li><a href="">考勤</a></li>
          <li><a href="">薪酬</a></li>
          <li><a href="">社保公积金</a></li>
          <li><a href="">绩效</a></li>
          <li><a href="../code/training-index.html">培训</a></li>
          <li><a href="">审批</a></li>
          <li><a href="">权限设置</a></li>
        </ul>
      </div>
    </nav>
    <div class="ct-box">
      <div class="nav-ct-2">
        <ul class="nav-ct-menu">
          <li class="title">
            培训管理
            <ul>
              <li id="trainingPlan">培训计划管理</li>
              <li id="courseManagement">课程管理</li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="iframe-box">
        <iframe
          id="bi_iframe"
          src="./01-training-plan.html"
          frameborder="0"
          onload="adjustIframe();"
        ></iframe>
      </div>
    </div>
    <!-- 建议添加一个页脚 -->
    <script>
      // 监听浏览器窗口尺寸变化
      const ctBox = document.querySelector(".ct-box");
      const navCt2 = document.querySelector(".nav-ct-2");
      const navCt = document.querySelector(".nav-ct");
      window.onresize = function () {
        const windowHeight = document.documentElement.clientHeight;
        const ctBoxWidth = getStyleValue(ctBox, "width");
        const ctBoxHeight = getStyleValue(ctBox, "height");
        const navCt2Width = getStyleValue(navCt2, "width");
        const navCtHeight = getStyleValue(navCt, "height");
        const iframeWidth = ctBoxWidth - navCt2Width;
        const iframeHeight = windowHeight - navCtHeight;
        $("iframe").attr("onload", `adjustIframe();`);
        $("iframe").css({
          width: iframeWidth,
          height: iframeHeight,
        });
      };
      // 自适应
      function adjustIframe() {
        let ifm = document.getElementById("bi_iframe");
        ifm.height = document.documentElement.clientHeight - 85;
        ifm.width = document.documentElement.clientWidth - 170;
      }
      $(".title>ul>li")
        .eq(0)
        .on("click", function (event) {
          $(".iframe-box>iframe").attr("src", "./01-training-plan.html");
        });
      $(".title>ul>li")
        .eq(1)
        .on("click", function (event) {
          $(".iframe-box>iframe").attr("src", "./02-course-management.html");
        });
      /*
        获取元素节点样式style，如果属性值带有数字，则可以用parseFloat转换
        dom: 元素节点
        attr: 样式属性 "color" 用js或css写法都可以
        */
      function getStyleValue(dom, attr) {
        return parseFloat(getComputedStyle(dom)[attr]);
      }
    </script>
  </body>
</html>
